<template><!--我的证书-->
    <div id="print" style="height: 100%">
        <navbar :title="title" class="header-title-00 header-title-01">
            <template #right>
                <div class="header-icon">
                    <van-icon v-if="!directionShow" @click="onLandscape" size="30" name="expand-o" />
                    <van-icon v-else @click="onPortrait" size="30" name="shrink" />
                </div>
            </template>
        </navbar>
        <div class="content" style="overflow: auto;display: flex;align-items: center;">
            <div style="width: 100%;" ref="contentRef">
                <iframe v-if="showUrl" :src="idvUrl" height="100%" width="100%" scrolling="yes" frameborder="0"/>
                <van-image v-if="imgSrc" @click.native="previewImage" :src="this.imgSrc" height="100%" width="100%" fit="contain" />
            </div>
        </div>
    </div>
</template>

<script>
import { htmlToImageBase64 } from '@/utils/htmlToImage';
import {ImagePreview} from 'vant';
export default {
    name: 'preview-cert',
    components: {},
    data() {
        return {
            title: this.$t('my_certificate'),
            directionShow: false,
            showUrl: false,
            idvUrl: '',
            imgSrc: ''
        };
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        /**
         * 横屏
         */
        onLandscape() {
            this.$nextTick(() => {
                this.directionShow = true;
                let imgObj = document.getElementsByClassName('van-image');
                if (imgObj && imgObj[0]) {
                    imgObj[0].style.width = '';
                    imgObj[0].style.height = imgObj[0].offsetWidth + 'px';
                }
                this.$refs.contentRef.style.height = '';
                this.$refs.contentRef.style.transform = 'rotate(90deg)';
                if (window.plus) {
                    window.plus.screen.lockOrientation('landscape-primary');
                }
            });
        },
        /**
         * 竖屏
         */
        onPortrait() {
            this.$nextTick(() => {
                this.directionShow = false;
                let imgObj = document.getElementsByClassName('van-image');
                if (imgObj && imgObj[0]) {
                    imgObj[0].style.width = '100%';
                    imgObj[0].style.height = '100%';
                }
                this.$refs.contentRef.style.width = '100%';
                this.$refs.contentRef.style.transform = '';
                if (window.plus) {
                    window.plus.screen.lockOrientation('portrait-primary');
                }
            });
        },
        /**
         * 获取证书信息
         */
        getCertInfo() {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/cert/preview',
                params: {
                    itmId: this.$route.params.itmId,
                    type: this.$route.params.type,
                    certId: this.$route.params.certId
                }
            }).then(res => {
                this.title = res.data.cfcTitle;
                if (res.data.acContent) {
                    htmlToImageBase64([res.data.acContent]).then(res2 => {
                        this.imgSrc = res2;
                    });
                }
                if (res.data.acUrl) {
                    this.getIdvUrl(res.data.acUrl);
                }
            });
        },
        getIdvUrl(data) {
            this.$axios({
                method: 'GET',
                url: `/app/idv/previewUrl`,
                params: {
                    filePath: data
                }
            }).then(res => {
                this.showUrl = true;
                this.idvUrl = res.data;
            });
        },
        /**
         * 预览图片
         */
        previewImage() {
            if (!this.imgSrc) {
                return;
            }
            ImagePreview({
                images: [this.imgSrc],
                closeable: true,
                showIndex: false
            });
        }
    },
    mounted() {
        this.getCertInfo();
    }
};
</script>

<style scoped lang="less">
#print {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.header-icon{
    height: 56px;
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    /deep/.van-icon{
        color: #ccc;
    }
}
</style>
